<template>
  <div id="nav">
    <div>

    </div>
    <tou :tasks="tasks" @sendData="add"></tou>
    <zhong :tasks="tasks" @sendData="Done"></zhong>
    <wei :tasks="tasks" @sendData="del"></wei>

  </div>

</template>

<script setup>
import { reactive } from 'vue';
import tou from '@/components/tou/01-tou.vue'
import zhong from '@/components/zhong/01-zhuti.vue'
import wei from '@/components/wei/01-wei.vue'



let tasks = reactive([
  { id: 1, name: '学习', isDone: true },
  { id: 2, name: '跳舞', isDone: true },
  { id: 3, name: '唱歌', isDone: false }
]);


let num = 0
let add = function (date) {
  num=num+1
  let result = {
    id: tasks.length +1+num,
    name: date.value,
    isDone: false
  }
  tasks.push(result)
};





let Done = function (value,num) {
  tasks.forEach((item) => {
    if(item.id==num){
      item.isDone=value
    }
  })
};

let del = function(){
  
  let arrs = tasks.filter(item => item.isDone == false)
  tasks.length = 0
  tasks.push(...arrs)
}


</script>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

// #nav {
//   padding: 30px;

//   a {
//     font-weight: bold;
//     color: #2c3e50;

//     &.router-link-exact-active {
//       color: #42b983;
//     }
//   }
// }
</style>
